<template>
  <div class="dateClass">
    <h1>字典数据</h1>
    <el-form :inline="true" :model="querry" class="demo-form-inline" ref="queryForm">
      <el-form-item label="字典名称" prop="dictName">

        <el-select v-model="querry.dictId" size="small" @change="changeBySelect">
          <el-option v-for="item in listType" :key="item.dictId" :label="item.dictName" :value="item.dictId" />
        </el-select>

      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="querry.dictType" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item label="字典状态" prop="status">
        <el-input v-model="querry.status" placeholder="请输入" size="small"></el-input>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- //各种按钮 -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdates">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDeletes">删除
        </el-button>
      </el-col>

      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>

    <!--表格数据-->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="dictCode" label="字典主键" width="180">
      </el-table-column>
      <el-table-column prop="dictLabel" label="字典标签" width="180">
      </el-table-column>
      <el-table-column prop="dictValue" label="字典键值" width="180">
      </el-table-column>
      <el-table-column prop="dictSort" label="字典排序" width="180">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          <el-switch @change="statuChange" v-model="scope.row.status" active-value="0" inactive-value="1"
            active-color="#13ce66" inactive-color="#ff4949" :disabled="isStatus">
            ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--新增或修改对话框-->

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="twoForm" :model="dataForm" label-width="80px">
        <el-form-item label="字典类型">
          <el-input v-model="dataForm.dictType" :disabled="true" />
        </el-form-item>
        <el-form-item label="数据标签" prop="dictLabel">
          <el-input v-model="dataForm.dictLabel" placeholder="请输入数据标签" />
        </el-form-item>
        <el-form-item label="数据键值" prop="dictValue">
          <el-input v-model="dataForm.dictValue" placeholder="请输入数据键值" />
        </el-form-item>
        <el-form-item label="字典排序" prop="dictSort">
          <el-input v-model="dataForm.dictSort" placeholder="请输入数据键值" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <!-- <el-input v-model="dataForm.status" placeholder="请输入数据键值" /> -->
         <el-select v-model="dataForm.status" placeholder="请选择活动区域">
           <el-option label="正常" value="0"></el-option>
           <el-option label="停用" value="1"></el-option>
         </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dataForm.remark" placeholder="请输入数据键值" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancle">取 消</el-button>
        <el-button type="primary" @click="dialogForm ('twoForm')">确 定</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resettwoForm('twoForm')">重置</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {
    getDate,
    getTypelist,
    dataAdd,
    dataDel,
    dataUpdata

  } from "../../../api/data.js"
  export default {
    name: "SysData",
    data() {
      return {

        title: "默认",
        dataForm: {
          dictType: undefined,
          dictLabel: undefined,
          dictValue: undefined,
          dictSort: undefined,
          status: undefined,
          remark: undefined,
          createTime: undefined

        },
        statusAll: [{
          valueAAA: 0,
          labelAAA: "正常"
        }, {
          valueAAA: 1,
          labelAAA: "禁用"
        }],
        isAdd: true,

        //对话框的开关
        open: false,
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //显示中的表得状态禁用
        isStatus: true,
        //装选中的数据
        totalForData: [],

        //是否清空
        isclean: true,

        querry: {
          dictId: undefined,
          dictLabel: undefined,
          status: undefined
        },
        //表格数据
        querryTwo: {

          dictSort: undefined,
          dictLabel: undefined,
          dictValue: undefined,
          dictType: undefined,
          status: undefined,
          remark: undefined

        },
        tableData: [],

        //字典表格数据
        listType: [],
      }
    },
    methods: {
      //状态开关
      statuChange(a) {
        console.log("状态变化返回的数据   ", a)
      },

      //新增按钮
      handleAdd(a) {
        if (this.isclean) {
          this.dataForm = {};
        }
        this.open = true
        this.title = "新增"
        this.isAdd = true
        //得到当前选中的类型
        let currentType = this.listType.filter(p => p.dictId === this.querry.dictId);
        // console.log(currentType)
        this.dataForm.dictType = currentType[0].dictType
      },
      //选择器值发生变化时执行的函数 其中返回的是被选中的值
      changeBySelect(a) {
        this.handleQuery()
      },
      //修改按钮
      handleUpdates() {
        this.open = true
        this.title = "选择修改"
        this.isAdd = false
        this.dataForm = this.totalForData[0]
        dataUpdata(this.dataForm)
        this.handleQuery()
      },

      //删除按钮
      handleDeletes() {
        for (var i = 0; i < this.totalForData.length; i++) {
          var a = this.totalForData[i].dictCode
          var c = {}
          c['dictCode'] = a
          dataDel(c)
          this.handleQuery()
        }
        this.totalForData = []



      },

      //对话框里的确定按钮
      dialogForm() {
        if (this.isAdd) {
          dataAdd(this.dataForm).then(resp => {
            this.open = false
            this.handleQuery()
            this.isclean = true
          })
        } else {
          dataUpdata(this.dataForm).then(res => {
            this.open = false
            this.handleQuery()
            this.isclean = true
          }).catch(e => {
            console.log("为进入发送请求     ", e)
          })
        }
      },

      //对话框里的取消按钮
      dialogCancle() {
        if (this.isAdd) {
          this.isclean = false
        } else {
          this.isclean = true
        }
        this.open = false
      },
      //对话框里的重置按钮
      resettwoForm() {
        this.dataForm = {}
      },

      handleQuery() {
        this.loadData()
      },
      resetQuery() {},
      //多选框
      handleSelectionChange(a) {
        if (a.length > 0) {
          this.multiple = false
        } else this.multiple = true
        if (a.length === 1) {
          this.single = false
        } else this.single = true
        this.totalForData = a
      },

      //修改
      handleUpdate(a) {
        this.open = true
        this.title = "侧边修改"
        this.isAdd = false
        //得到当前选中的类型
        let currentType = this.listType.filter(p => p.dictId === this.querry.dictId);
        this.dataForm.dictType = currentType[0].dictType
        this.dataForm = a
        this.dataForm.createTime=undefined
      },
      //删除
      handleDelete(a) {
        var c = {}
        c['dictCode'] = a.dictCode
        dataDel(c).then(resp => {
          this.handleQuery()
        }).catch(e => {
          console.log("请求有误   ", e)
        })
      },
      //导出需要的函数
      getList() {},
      //加载数据
      loadData() {
        getDate(this.querry).then(resp => {
          this.tableData = resp.data
        })
      },
      //只执行一次的函数 全查之后将对象复制给 listType
      listTypeData() {
        getTypelist().then(resp => {
          this.listType = resp.data
        })
      }
    },
    created() {
      // 取得路由参数
      let dictTypeId = this.$router.currentRoute.params.dictId;
      this.querry.dictId = parseInt(dictTypeId)
      this.loadData()
      this.listTypeData()
    }
  }
</script>

<style>
</style>
